<template>
  <div class="login">
    <div class="avatar">
      <van-icon name="user-circle-o" class="icon" />
    </div>
    <div class="user_info">
      <van-form @submit="onSubmit"
        :colon="true"
        :label-align="'right'"
        :label-width="'4rem'"
      >
        <van-field
          v-model="email"
          name="email"
          label="邮箱"
          placeholder="请输入邮箱"
          :rules="[{ required: true, message: '请填写邮箱' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">登录</van-button>
        </div>
      </van-form>
    </div>
    <p>没有账号，现在去 <router-link :to="{name: 'Register'}" class="register">注册</router-link> </p>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    onSubmit (userInfo) {
      console.log('submit', userInfo)
      this.email = userInfo.email
      this.username = userInfo.username
      this.$axios
        .post('/api/user/login', userInfo)
        .then(res => {
          // 获取token，将token放入localStorage中
          const { todo_token } = res.data
          localStorage.setItem('todo_token', todo_token)

          // 跳转到登录页面
          this.$router.push('/home')
        })
    }
  }
}
</script>

<style lang="stylus" scoped>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;

  .avatar {
    margin-top: 5rem;
    margin-bottom: 2rem;
    width: 5rem;
    height: 5rem;

    .icon {
      width: 100%;
      height: 100%;
      border-radius: 50% 50%;
      text-align: center;
      font-size: 5rem;
      color: #cccccc;
    }
  }

  p {
    font-size 0.8rem
    .register {
      color blue
    }
  }
}
</style>
